<template>
	<div>
		<el-card>
			<div slot="header" class="clearfix">
				<span>样品订单详情</span>
			</div>
			<el-form ref="orderForm" :model="orderForm" :rules="formRule" label-position="right" label-width="120px" style="width:100%;flex-wrap:wrap" class="flex">
				<el-form-item label="订单时间" prop="createTime" style="width:30%">
					<el-input v-model="orderForm.createTime" placeholder="" :disabled="isDisabled"></el-input>
				</el-form-item>

				<el-form-item label="订单号" prop="recordNum" style="width:30%">
					<el-input v-model="orderForm.recordNum" placeholder="" :disabled="isDisabled"></el-input>
				</el-form-item>
				<el-form-item label="订单状态" prop="status" style="width:30%">
					<el-input v-model="orderForm.status" placeholder="" :disabled="isDisabled"></el-input>
				</el-form-item>
				<el-form-item label="来源类别" prop="from" style="width:30%">
					<el-input v-model="orderForm.from" placeholder="" :disabled="isDisabled"></el-input>
				</el-form-item>
				<el-form-item label="用户名" prop="askAccount" style="width:30%">
					<el-input v-model="orderForm.askAccount" placeholder="" :disabled="isDisabled"></el-input>
				</el-form-item>
				<el-form-item label="联系人电话" prop="askPhone" style="width:30%;">
					<el-input v-model="orderForm.askPhone" placeholder="" :disabled="isDisabled"></el-input>
				</el-form-item>
				<el-form-item label="公司名称" prop="company" style="width:30%">
					<el-input v-model="orderForm.company" placeholder="" :disabled="isDisabled"></el-input>
				</el-form-item>
				<el-form-item label="联系人" prop="contact" style="width:30%">
					<el-input v-model="orderForm.contact" placeholder="" :disabled="isDisabled"></el-input>
				</el-form-item>
				<el-form-item label="收货人" prop="consignee" style="width:30%">
					<el-input v-model="orderForm.consignee" placeholder="" :disabled="isDisabled"></el-input>
				</el-form-item>
				<el-form-item label="收货人联系电话" prop="consigneeMobile" style="width:30%">
					<el-input v-model="orderForm.consigneeMobile" placeholder="" :disabled="isDisabled"></el-input>
				</el-form-item>
				<el-form-item label="收货地址" prop="companyAddress" style="width:30%">
					<el-input v-model="orderForm.companyAddress" placeholder="" :disabled="isDisabled" :title="orderForm.companyAddress"></el-input>
				</el-form-item>
				<el-form-item label="申请理由" prop="remark" style="width:30%">
					<el-input v-model="orderForm.remark" placeholder="" :disabled="isDisabled"></el-input>
				</el-form-item>
				<el-form-item label="终端客户" prop="client" style="width:30%">
					<el-input v-model="orderForm.client" placeholder="" :disabled="isDisabled"></el-input>
				</el-form-item>
				<el-form-item label="项目产品" prop="useProduct" style="width:30%">
					<el-input v-model="orderForm.useProduct" placeholder="" :disabled="isDisabled"></el-input>
				</el-form-item>
				<el-form-item label="量产时间" prop="createTime" style="width:30%">
					<el-input v-model="orderForm.createTime" placeholder="" :disabled="isDisabled"></el-input>
				</el-form-item>
				<el-form-item label="单机用量" prop="useCount" style="width:30%">
					<el-input v-model="orderForm.useCount" placeholder="" :disabled="isDisabled"></el-input>
				</el-form-item>
				<el-form-item label="预估数量(套)" prop="useTotal" style="width:30%">
					<el-input v-model="orderForm.useTotal" placeholder="" :disabled="isDisabled"></el-input>
				</el-form-item>

				<el-form-item label="项目名称" prop="useProject" style="width:30%">
					<el-input v-model="orderForm.useProject" placeholder="" :disabled="isDisabled"></el-input>
				</el-form-item>
				<el-form-item label="项目联系人姓名" prop="pm" style="width:30%;">
					<el-input v-model="orderForm.pm" placeholder="" :disabled="isDisabled"></el-input>
				</el-form-item>
				<el-form-item label="项目联系人电话" prop="pmMobile" style="width:30%;">
					<el-input v-model="orderForm.pmMobile" placeholder="" :disabled="isDisabled"></el-input>
				</el-form-item>

				<el-form-item label="联系邮箱" prop="email" style="width:30%;">
					<el-input v-model="orderForm.email" placeholder="" :disabled="isDisabled"></el-input>
				</el-form-item>

			</el-form>

			<el-table :data="tableData" style="width: 100%" height="400" stripe>
				<el-table-column prop="productNum" label="样品物料料号" align="center"></el-table-column>
				<el-table-column prop="manufacturer" label="供应商" align="center"></el-table-column>
				<el-table-column prop="count" label="申请数量" align="center"></el-table-column>
				<el-table-column prop="status" label="状态" align="center"></el-table-column>
				<el-table-column label="操作" align="center" width="700" fixed="right">
					<template slot-scope="scope">
						<div>

							<!--
              <el-button size="mini" type="primary" @click="approvalSuccess(scope.row,scope.$index)" v-if="scope.row.status== '0'">
                <p style="color:white;">审批通过</p>
              </el-button>
              -->

							<el-button type="primary" size="mini" style="float:right;" @click="showExpress2(scope.row)">
								<p style="color:white">查看物流</p>
							</el-button>

							<el-button type="primary" size="mini" style="float:right;margin-right:10px;margin-left:0px" v-if="scope.row.oldstatus == 1 && sendby == 2" @click="send(scope.row)">
								<p style="color:white">发货</p>
							</el-button>

							<el-button type="primary" size="mini" style="float:right;margin-right:10px" @click="download(scope.row,scope.$index)">
								<p style="color:white">预览</p>
							</el-button>

							<el-upload :action="uploadActionUrl" style="float:right" :headers="{Authorization:token}" :on-success="handlePreview">
								<el-button type="primary" size="mini" @click="getid(scope.row,scope.$index)">上传产品资料</el-button>
							</el-upload>

							<el-button size="mini" type="primary" style="float:right;margin-right:10px" @click="approvalFail(scope.row,scope.$index)">
								<p style="color:red;">审批不通过</p>
							</el-button>

							<el-button size="mini" type="primary" style="float:right;margin-right:10px" @click="approvalSuccess(scope.row,scope.$index)">
								<p style="color:white;">审批通过</p>
							</el-button>

							<el-button size="mini" type="primary" style="float:right" @click="addnum(scope.row,scope.$index)">
								<p style="color:white;">修改数量</p>
							</el-button>

						</div>
					</template>
				</el-table-column>
			</el-table>

			<el-pagination style="text-align:center;margin-top:20px" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>

		</el-card>
		<!--物流详情-->
		<el-dialog style="width:800px;margin:0 auto;margin-top:50px" title="物流详情" :modal="true" :visible.sync="dialogFormVisible">
			<el-form :model="expressInfo">
				<el-form-item label="发货商" prop="deliverySide" label-width="70px">
					<el-input :disabled="true" v-model="expressInfo.deliverySide" autocomplete="off"></el-input>
				</el-form-item>

				<el-form-item label="物流公司" label-width="70px">
					<el-input :disabled="true" v-model="expressInfo.expressCompany" autocomplete="off"></el-input>
				</el-form-item>

				<el-form-item label="物流单号" label-width="70px" @click.native="goshunfeng(expressInfo.expressNum)">
					<el-input placeholder="" :disabled="true" v-model="expressInfo.expressNum">
						<template slot="append">查看物流</template>
					</el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
			</div>
		</el-dialog>
		<!--确认发货-->
		<el-dialog title="确认发货" :visible.sync="sendVisible" width="30%">
			<el-form ref="orderForm" :model="orderForm" :rules="formRule" label-position="right" label-width="120px" style="width:100%;flex-wrap:wrap" class="flex">
				<el-form-item label="物流公司" prop="expressCompany">
					<el-input v-model="orderForm.expressCompany" placeholder="顺丰速运"></el-input>
				</el-form-item>
				<el-form-item label="物流号" prop="expressNum">
					<el-input v-model="orderForm.expressNum" placeholder="请输入有效的物流编号"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
          <el-button @click="sendVisible = false">取 消</el-button>
          <el-button type="primary"
                     @click="sendProduct()">确 定</el-button>
        </span>
		</el-dialog>
	</div>
</template>

<script>
	import {
		RECORDLISTBYMAIN,
		SAMPLE_AUTH,
		MODIFYCOUNT,
		recordAuth,
		recordListByMain,
		modifyAmlFile,
		modifyCount,
		CONFIRMSEND
	} from '@/utils/api';
	import { formatDate } from '@/utils/validate.js';
	import { Message } from 'element-ui'
	export default {
		data() {
			return {
				downloadUrl:"https://yzbban.oss-cn-shanghai.aliyuncs.com/",
				uploadActionUrl: 'http://aml.foxcore.cn/api/v1/file/pdf/product',
				orderForm: {},
				formRule: {},
				tableData: [],
				isDisabled: false,
				currentPage: 1,
				pageSize: 5,
				total: 0,
				token: '1123',
				rowData: {},
				sendVisible: false,
				dialogFormVisible: false,
				expressInfo: [],
				deliverySide: '',
				sendby: '',
			};
		},
		mounted() {
			this.token = sessionStorage.getItem('op-token')
			this.first()
		},

		methods: {
			//物流详情
			showExpress2(row) {
				console.log("物流详情test："+row)
				this.expressInfo = row;
				if(this.expressInfo.deliverySide == 1) {
					row.deliverySide = "鸿芯优电上海仓";
				} else if(this.expressInfo.deliverySide == 2) {
					row.deliverySide = "制造商直出";
				} else {
					row.deliverySide = "未知";
				}

				
				this.dialogFormVisible = true;
			},
			goshunfeng(url) {
				var hrefurl =
					"https://www.sf-express.com/cn/sc/dynamic_function/waybill/#search/bill-number/" +
					url;
				window.open(hrefurl);
			},
			//发货
			send(row) {
				this.rowData = row
				console.log("rowData", row)
				this.sendVisible = true
			},
			sendProduct() {

				if(!this.orderForm.expressCompany) {
					this.orderForm.expressCompany = '顺丰速运'
				}

				CONFIRMSEND({
					recordId: this.rowData.id,
					expressCompany: this.orderForm.expressCompany,
					expressNum: this.orderForm.expressNum,
				}).then(res => {
					this.$message.success('发货成功')
					this.sendVisible = false

				})
			},
			first() {
				if(this.$route.query["data"]) {
					this.isDisabled = this.$route.query["handler"] == "check" ? true : false;
					this.orderForm = this.$route.query["data"];
					this.expressInfo.deliverySide = this.orderForm.deliverySide
					this.sendby = this.orderForm.deliverySide

					console.log("this.sendby", this.sendby)
					this.orderForm.createTime = this.formatSecond(this.orderForm.createTime)
					recordListByMain({
						recordmainId: this.orderForm.id,
						pageNo: 1,
						pageSize: 10
					}).then(res => {
						this.tableData = res.data.dataList
						let datacount = this.tableData.length
						let i = 0;
						for(i = 0; i < datacount; i++) {

							this.tableData[i].oldstatus = this.tableData[i].status
							if(this.tableData[i].status == 0) {
								this.tableData[i].status = '已提交审核'
							}
							if(this.tableData[i].status == 1) {
								this.tableData[i].status = '待发货'
							}
							if(this.tableData[i].status == 2) {
								this.tableData[i].status = '已婉拒'
							}
							if(this.tableData[i].status == 4) {
								this.tableData[i].status = '已完成发货'
							}
						}

						console.log(this.tableData)
					})

					//
					// this.getOrderList()
				}
			},
			first2() {
				if(this.$route.query["data"]) {
					this.isDisabled = this.$route.query["handler"] == "check" ? true : false;
					this.orderForm = this.$route.query["data"];
					this.expressInfo.deliverySide = this.orderForm.deliverySide
					recordListByMain({
						recordmainId: this.orderForm.id,
						pageNo: 1,
						pageSize: 10
					}).then(res => {
						this.tableData = res.data.dataList
						let datacount = this.tableData.length
						let i = 0;
						for(i = 0; i < datacount; i++) {

							if(this.tableData[i].status == 0) {
								this.tableData[i].status = '已提交审核'
							}
							if(this.tableData[i].status == 1) {
								this.tableData[i].status = '待发货'
							}
							if(this.tableData[i].status == 2) {
								this.tableData[i].status = '已婉拒'
							}
							if(this.tableData[i].status == 4) {
								this.tableData[i].status = '已完成发货'
							}
						}

						console.log(this.tableData)
					})

					//
					// this.getOrderList()
				}
			},
			getid(row, index) {

				this.listid = row.id
			},
			handlePreview(res, row) {
				let src = res.data
				modifyAmlFile({
					recordId: this.listid,
					amlFile: src
				}).then(res2 => {
					Message({
						message: '上传成功',
						type: 'success',
						duration: 2000
					})
					this.first2()
				})
			},
			beforeUpload(file) {
				console.log('==file==>' + file)
				this.updateForm.imageUrl = ''
				this.hiddenFile = file
			},
			download(row, index) {
				console.log(row)
				if(row.amlFile) {
					var url = this.downloadUrl + row.amlFile;

					console.log("jsw", url)

					location.href = url;
				} else {
					Message({
						message: '无下载资料',
						type: 'error',
						duration: 2000
					})
				}

			},
			pass(id, value) {
				console.log(23)
				recordAuth({
					recordId: id,
					authType: 1,
					remark: value
				}).then(res => {
					this.first2()
				})
			},

			fail(id, value) {
				recordAuth({
					recordId: id,
					authType: 2,
					remark: value
				}).then(res => {
					this.first2()
				})
			},
			//时间格式化  
			formatSecond(row, column) {
				//    var second = row[column.property];  
				//    if (!second) return ""; 
				return formatDate(new Date(row * 1000), "yyyy-MM-dd hh:mm:ss");
			},
			// 订单状态格式化
			formatStatus(row, column) {
				var status = row[column.property]
				switch(status) {
					// case 0: return '审核中'
					// case 1: return '已审核'
					// case 2: return '已婉拒'
					// case 3: return '待发货'
					// case 4: return '待收货'
					// case 5: return '待评价'

				}
			},
			// getOrderList(){
			//   RECORDLISTBYMAIN({
			//       recordmainId:this.orderForm.id,
			//       pageNo: this.currentPage,
			//       pageSize: this.pageSize
			//   }).then(res => {
			//      this.tableData = res.data.dataList
			//      this.total = res.data.count
			//   })
			// },
			checkTransport(row, index) {
				//    this.$router.push('transportation')
				Message({
					message: '该功能暂未开放',
					type: 'error',
					duration: 2000
				})
			},
			// 审批订单
			//     approvalOrder(orderId, approvalType, remark) {
			//       SAMPLE_AUTH({
			//         recordId: orderId,
			//         authType: approvalType,
			//         remark: remark
			//       }).then(res => {
			//         console.log("res : " + JSON.stringify(res))
			//         if(200 == res.status){
			//           this.$message.success("操作成功")
			// //        this.$router.push({ path: "exapply" })
			// //       			this.getOrderList()
			//         }else {
			//           this.$message.error("操作失败")
			//         }
			//       })
			//     },
			approvalSuccess(row, index) {

				this.$prompt('请输入审核意见', '审核', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
				}).then(({
					value
				}) => {
					this.pass(row.id, value)
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '取消输入'
					});
				});

			},
			approvalFail(row, index) {
				this.$prompt('请输入审核意见', '审核', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
				}).then(({
					value
				}) => {
					this.fail(row.id, value)
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '取消输入'
					});
				});
			},
			addnum(row, index) {
				this.$prompt('请输入修改数量', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
				}).then(({
					value
				}) => {

					if(value == null || value == 0) {
						this.$message({
							type: 'error',
							message: '请输入合法数量'
						});
					} else {

						modifyCount({
							recordId: row.id,
							count: value
						}).then(res => {
							console.log("数量修改成功")
							row.count = value

						})
					}

				}).catch(() => {
					this.$message({
						type: 'info',
						message: '取消输入'
					});
				});
			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
				this.pageSize = val
				// this.getOrderList()
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
				this.currentPage = val
				// this.getOrderList()
			}
		}
	};
</script>

<style lang="scss">
	.back {
		background: rgb(7, 131, 241);
		color: #fff;
		width: 30%;
		margin: 25px 0;
	}
	
	.el-input-group__append {
		cursor: pointer;
	}
</style>